<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-filter flex">
				<div class="fil-label">办案中心类型：</div>
				<div class="flex_bd">
					<el-radio-group v-model="styleV" size="small" @change="change">
						<el-radio v-for="(item,index) in filstyles" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
				</div>
				<div class="fil-select" @click="filToggle">
					<div v-if="filshow == 10"><span>展开</span><span class="el-icon-arrow-down"></span></div>
					<div v-else><span>收起</span><span class="el-icon-arrow-up"></span></div>
				</div>
			</div>
			<div class="bs-filter flex-center">
				<div class="fil-label">其他选项：</div>
				<div class="flex_bd flex-center fil-form">
					<el-form size="small" :inline="true" ref="form" :model="form">
						<el-form-item label="作者">
							<el-select v-model="form.author" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="好评度">
							<el-select v-model="form.raty" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="fil-button">
					<el-button size="small" type="primary">查询</el-button>
					<el-button size="small" type="default">清空</el-button>
				</div>
			</div>
		</div>
		<div class="place-cells">
			<swiper class="place-swipe" :options="swiperplace" ref="swiperplace">
				<swiper-slide v-for="(item,index) in lists" :key="index">
					<div class="place-box">
						<div class="place-pic" :style="{backgroundImage: 'url(' + item.bg + ')'}"></div>
						<div class="place-grid">
							<div class="title ellipsis">{{item.title}}</div>
							<div class="desc ellipsis">{{item.desc}}</div>
							<div class="pl-foot Between">
								<div class="pl-time">5 hours ago</div>
								<div class="pl-avatars">
									<div class="avatar"><img src="../../assets/images/er/pop.jpg"></div>
									<div class="avatar"><img src="../../assets/images/er/pop.jpg"></div>
									<div class="avatar"><img src="../../assets/images/er/pop.jpg"></div>
									<div class="avatar"><img src="../../assets/images/er/pop.jpg"></div>
								</div>
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
		<div class="bs-panel">
			<div class="bs-room-body flex-center">
				<div class="room-left">
					<div class="room-echart">
						<div id="myChart" :style="{ height: '355px'}"></div>
					</div>
				</div>
				<div class="flex_bd">
					<div class="room-cell flex-center">
						<div class="rlabel">等候室</div>
						<div class="flex_bd">
							<div class="room-swiper">
								<swiper class="room-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
									<swiper-slide v-for="(item,index) in slides" :key="index">
										<div class="img" :style="{'background-image': 'url('+item.img+')'}"></div>
									</swiper-slide>
								</swiper>
								<div class="swiper-pagination swiper-pagination1"></div>
							</div>
						</div>
					</div>
					<div class="room-cell flex-center">
						<div class="rlabel">审讯室</div>
						<div class="flex_bd">
							<div class="room-swiper">
								<swiper class="room-thumbs" :options="swiperOptionThumbs2" ref="swiperThumbs">
									<swiper-slide v-for="(item,index) in slides" :key="index">
										<div class="img" :style="{'background-image': 'url('+item.img+')'}"></div>
									</swiper-slide>
								</swiper>
								<div class="swiper-pagination swiper-pagination2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<swiper class="steps-swipe" :options="swipersteps" ref="swipersteps">
				<swiper-slide v-for="(item,index) in steps" :key="index">
					<div class="col flex" >
						<div class="step-item" @click="stepTab(index)" :class="stepActive == index?'active':''">
							<div class="icon"><i class="iconfont " :class="item.icon"></i></div>
							<div class="text">{{item.title}}</div>
						</div>
						<div class="step-item_line"></div>
					</div>
				</swiper-slide>
			</swiper>
			
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				styleV: "1",
				filshow: 10000,
				filstyles: [{
						title: '全部',
						value: '1',
					},
					{
						title: '类目一',
						value: '2',
					},
					{
						title: '类目二',
						value: '3',
					},
					{
						title: '类目三',
						value: '4',
					},
					{
						title: '类目四',
						value: '5',
					},
					{
						title: '类目五',
						value: '6',
					},
					{
						title: '类目六',
						value: '7',
					},
					{
						title: '类目七',
						value: '8',
					},
					{
						title: '类目八',
						value: '9',
					},
					{
						title: '类目九',
						value: '10',
					},
					{
						title: '类目十',
						value: '11',
					},
					{
						title: '类目十一',
						value: '12',
					},
					{
						title: '类目十二',
						value: '13',
					},
				],
				form: {
					author: '1',
					raty: '1',
				},
				slides: [{
						img: require('../../assets/images/er/b1.jpg')
					},
					{
						img: require('../../assets/images/er/b2.jpg')
					},
					{
						img: require('../../assets/images/er/b1.jpg')
					},
				],
				swiperOptionThumbs: {
					centeredSlides: true,
					loop: true,
					slidesPerView: '3',
					slideToClickedSlide: true,
					autoplay: {
						delay: 611500,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination1',
					},
				},
				swiperOptionThumbs2: {
					centeredSlides: true,
					loop: true,
					slidesPerView: '3',
					slideToClickedSlide: true,
					autoplay: {
						delay: 611500,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination2',
					},
				},
				swiperplace: {
					observer:true, 
					observeParents:true,
					slidesPerView: 5,
					slidesPerColumn: 2,
					spaceBetween: 20,
					autoplay: {
						delay: 4500,
						disableOnInteraction: false,
					},
				},
				swipersteps: {
					observer:true, 
					observeParents:true,
					spaceBetween: 0,
					slidesPerView: 6,
					// autoplay: {
					// 	delay: 4500,
					// 	disableOnInteraction: false,
					// },
				},
				stepActive:0,
				steps: [{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},{
						title: '这里是标题',
						icon: 'icon-bell',
						isactive: 'active',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
					{
						title: '这里是标题',
						icon: 'icon-bell',
					},
				],
				lists: [{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p3.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p4.jpg'),
					}, {
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p3.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p4.jpg'),
					}, {
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p3.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p4.jpg'),
					}, {
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p3.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p4.jpg'),
					}, {
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p1.jpg'),
					},
					{
						title: '我是标题我是标题',
						desc: '一句话描述一句话描述一句话描述',
						bg: require('../../assets/images/er/p2.jpg'),
					},
				],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
			this.drawLine(); //执行下面的函数
		},
		methods: {
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			change(e) {
				console.log(e)
			},
			filToggle() {
				if (this.filshow == 10) {
					this.filshow = 10000
				} else {
					this.filshow = 10
				}
			},
			stepTab(index){
				this.stepActive = index
				
			},
			drawLine() {
				var colorList = ['#1aaeba', '#0080ff']
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['50%', '70%'],
						clockwise: true,
						avoidLabelOverlap: true,
						hoverOffset: 15,
						itemStyle: {
							normal: {
								color: function(params) {
									return colorList[params.dataIndex]
								}
							}
						},
						label: {
							show: true,
							position: 'outside',
						},
						labelLine: {
							normal: {
								length: 20,
								length2: 30,
								lineStyle: {
									width: 1
								}
							}
						},
						data: [{
							'name': '数据1',
							'value': 15
						}, {
							'name': '数据2',
							'value': 54
						}, 
						],
					}]
				});
			}
		}
	}
</script>
